<template>
  <div class="touzilist">
    <el-card>
      <el-row :gutter="10" class="elrow">
        <el-col :span="4">
          <el-select v-model="formData.value" placeholder="请选择" clearable>
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="10">
          <el-input placeholder="请输入检索信息" v-model="formData.input" maxlength="18"></el-input>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" icon="el-icon-search" v-on:click="getTabsList">搜索</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 150%" border>
          <el-table-column type="index" :index="indexMethod" label="#"></el-table-column>
          <el-table-column label="姓名" align="center" width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.tname}}</span>
            </template>
          </el-table-column>
          <el-table-column label="性别" align="center" width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.sex}}</span>
            </template>
          </el-table-column>
          <el-table-column label="学历" align="center" width="80">
            <template slot-scope="scope">
              <span style="color:rgb(204,0,51)">{{ scope.row.edubgd}}</span>
            </template>
          </el-table-column>
          <el-table-column label="专业" align="center" width="80">
            <template slot-scope="scope">
              <span style="color:rgb(0, 208, 83)">{{scope.row.profession}}</span>
            </template>
          </el-table-column>
          <el-table-column label="等级" align="center" width="80">
            <template slot-scope="scope">
            <span>
              <el-tag size="medium">{{ scope.row.star}}</el-tag>
            </span>
            </template>
          </el-table-column>
          <el-table-column label="联系方式" align="center" width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.tele}}</span>
            </template>
          </el-table-column>
          <el-table-column label="邮箱" align="center" width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.email}}</span>
            </template>
          </el-table-column>
          <el-table-column label="身份证号" align="center" width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.sfz}}</span>
            </template>
          </el-table-column>
          <el-table-column label="教师资格证号" align="center" width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.tqc}}</span>
            </template>
          </el-table-column>
          <el-table-column label="审核状态" align="center" width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.isverify==1">已审核</span>
              <span v-else-if="scope.row.isverify==0" tyle="color: #37B328">未审核</span>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <div style="text-align: center;margin-top: 30px;">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="pagesize"
          :total="total"
          :current-page="currentPage"
          @current-change="current_change">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [],
        formData: {
          input: '',
          value: '0'
        },
        options: [{
          value: '0',
          label: '请选择检索方式',
          disabled: true
        }, {
          value: '1',
          label: '姓名',
        }, {
          value: '2',
          label: '电话'
        }, {
          value: '3',
          label: 'email'
        }, {
          value: '4',
          label: '专业'
        }, {
          value: '5',
          label: '教学等级'
        }, {
          value: '6',
          label: '身份证号'
        }, {
          value: '7',
          label: '教师资格证编号'
        }],
        total: 0,
        pagesize: 5,
        currentPage: 1,
      };
    },
    methods: {
      current_change(val){
        this.currentPage = val;
        console.log(val);
        console.log(this.currentPage);
        // console.log(this.tableData);
      },
      indexMethod(index){
        return (this.currentPage-1)*this.pagesize+index+1;
      },
      getTabsList() {
        if(this.formData.value === ''){
          this.formData.value = '0';
        }
        this.$axios
          .get("/queryteacher",
            {
              params: {
                input: this.formData.input,
                value: this.formData.value,
              }
            })
          .then(res => {
            //			console.log(res)
            const data = res.data;
            this.tableData = data.data;
            this.total = res.data.data.length;
            //   console.log(this.tableData)
          })
      },
    },
    mounted() {
      this.getTabsList();
    }
  }
</script>

<style scoped>
  .touzilist {
    margin: 10px;
  }
  .elrow{
    margin-bottom: 20px;
  }
</style>
